<template>
  <div class="login-wrap" :class="{ 'wrap-dark': isFocus }">
    <div class="login-box">
      <div class="login-logo"> <img :src="logoImg" alt="logo" /> </div>
      <div class="login-main">
        <p class="login-title">登 录</p>

        <p class="login-input">
          <input type="text" v-model="loginData.username" @focus="isFocus = true" @blur="isFocus = false" placeholder="用户名" />
        </p>
        <p class="login-input">
          <input type="password" v-model="loginData.password" @focus="isFocus = true" @blur="isFocus = false" placeholder="密码" />
        </p>

        <p class="error-msg">{{ errMsg }}</p>

        <p class="login-btn"><button @click="handleLogin">登 录</button></p>

        <div class="login-other">
          <div>微信登录</div>
          <div>QQ登录</div>
        </div>

        <p class="login-info">技术支持：@紫衣小生</p>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import logoImg from '@/assets/images/logo-excemple.png';
  import Message from '@/utils/message';
  import { Http } from '@/utils/http';
  import { nextTick, reactive, Ref, ref } from 'vue';
  import { useRouter } from 'vue-router';
  import { useMainStore } from '@/store';
  const router = useRouter();
  const mainStore = useMainStore();

  // 声明响应式数据
  // 表单
  const loginData = reactive({
    username: '',
    password: '',
  });
  // 错误提示
  const errMsg = ref<string>('');
  // 是否有input获取焦点
  const isFocus = ref<boolean>(false);

  // 操作事件
  /**
   * 登录事件
   * @result void
   */
  const handleLogin = () => {
    // 验证数据
    if (!loginData.username) {
      shakMsg('异常：请输入用户名！', errMsg);
      return false;
    }
    if (!loginData.password) {
      shakMsg('异常：请输入密码！', errMsg);
      return false;
    }

    errMsg.value = '';
    // TODO AJAX 登录

    Http.post('/login', loginData).then((res: any) => {
      const { token, info } = res;

      mainStore.$patch({
        token: token,
        userInfo: info,
      });

      console.log('🚀 ~ file: index.vue ~ line 77 ~ Http.post ~ mainStore.token', mainStore.token);

      nextTick(() => {
        Message.success(`欢迎回来：${res.info.realname}！`);
        router.push({ path: '/' });
      });
    });
  };

  // 工具方法
  /**
   * 闪烁提示信息
   * @param msg 提示信息
   * @param refData 响应式对象
   * @result void
   */
  const shakMsg = (msg: string, refData: Ref<string>) => {
    for (let i = 0; i < 3; i++) {
      setTimeout(() => {
        refData.value = '';
      }, 50 + i * 400);

      setTimeout(() => {
        refData.value = msg;
      }, 200 + i * 400);
    }
  };
</script>

<style lang="scss" scoped>
  $blue: #0eb0c9;
  $placeholder: rgba(
    $color: $blue,
    $alpha: 0.6,
  );
  .login-wrap {
    user-select: none;
    height: 100%;
    width: 100%;
    background-image: url('@/assets/images/login-back.jpg');
    background-repeat: no-repeat;
    // 水平垂直居中
    display: flex;
    justify-content: center;
    align-items: center;

    &.wrap-dark {
      position: reactive;
    }
    &.wrap-dark::before {
      transition: all 0.3s linear;

      position: absolute;
      content: '';
      height: 100%;
      width: 100%;
      left: 0;
      top: 0;
      background: rgba(0, 0, 0, 0.5);
    }
    .login-box {
      width: 400px;
      padding: 20px;
      z-index: 9;
      border: 3px solid $blue;
      border-radius: 10px;
      box-shadow: 0 0 20px $blue inset;
      background: rgba($color: $blue, $alpha: 0.35);
      backdrop-filter: blur(2px);

      .login-logo {
        text-align: center;
        img {
          width: 100%;
        }
      }

      .login-title {
        font-size: 22px;
        text-align: center;
        line-height: 100px;
        font-weight: bold;
        color: $blue;
      }

      .login-input {
        line-height: 50px;

        input {
          width: calc(100% - 20px);
          padding: 10px;

          outline: none;
          border: 1px solid $blue;
          box-shadow: 0 0 10px $blue inset;
          border-radius: 5px;

          background: rgba($color: $blue, $alpha: 0.2);

          font-size: 16px;
          font-weight: bold;
          color: $blue;

          text-align: center;
        }
        input::-webkit-input-placeholder {
          /* WebKit browsers */
          color: $placeholder;
        }
        input:-moz-placeholder {
          /* Mozilla Firefox 4 to 18 */
          color: $placeholder;
        }
        input::-moz-placeholder {
          /* Mozilla Firefox 19+ */
          color: $placeholder;
        }
        input:-ms-input-placeholder {
          /* Internet Explorer 10+ */
          color: $placeholder;
        }
      }

      .error-msg {
        height: 20px;
        line-height: 20px;
        font-size: 14px;
        text-align: center;
        color: rgb(255, 0, 0);
        text-shadow: 0 0 2px rgb(164, 255, 45);
      }
      .login-btn {
        padding: 20px 0;

        button {
          line-height: 40px;
          width: 100%;
          cursor: pointer;

          background: $blue;
          // border: 1px solid skyblue;
          border: none;
          border-radius: 5px;
          font-size: 16px;

          color: white;

          &:hover {
            font-weight: bold;
            background: rgb(58, 186, 236);
          }
        }
      }

      .login-info {
        font-size: 12px;
        color: #111;
        text-align: center;
      }

      .login-other {
        display: flex;

        div {
          flex: 1;
          text-align: center;
          height: 60px;
          line-height: 60px;
        }
      }
    }
  }
</style>
